<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="blog/luna/header::head-fragment"></head>
    <body>
        <header th:replace="blog/luna/header::header-fragment"></header>
        <div class="content">
            <section class="jumbotron"
                     th:style="'background:url(' + @{/customize/detail/15.jpg} + ');background-repeat:no-repeat;background-size:100% 100%;background-attachment: fixed;'">
                <div class="container">
                    <div id="jumbotron-meta-info">
                        <h2 th:text="${blogDetailVO.blogTitle}">标题</h2>
                        <span class="meta-info">
                            <span class="octicon octicon-calendar">&nbsp;
                                <th:block th:text="${#dates.format(blogDetailVO.createTime, 'yyyy-MM-dd')}"/>
                            </span>
                            &nbsp;&nbsp;
                            <span class="octicon octicon-comment">&nbsp;
                                <th:block th:text="${blogDetailVO.commentCount}"/> 条评论
                            </span>
                            &nbsp;&nbsp;
                            <span class="octicon octicon-eye-watch">&nbsp;
                                <th:block th:text="${blogDetailVO.blogViews}"/>浏览
                            </span>
                        </span>
                    </div>
                </div>
            </section>

            <article class="post container">
                <div class="row" id="blog-content">
                    <div class="col-md-12 markdown-body">
                        <th:block th:utext="${blogDetailVO.blogContent}"/>
                        <aside class="blog-rights clearfix">
                            <p>本站文章除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</p>
                        </aside>
                    </div>
                </div>

                <th:block th:if="${blogDetailVO.enableComment==0}">
                    <aside class="create-comment" id="create-comment">
                        <hr>
                        <h2><span class="octicon octicon-pencil"> 添加评论</span></h2>
                        <form action="#" method="get" onsubmit="return false;" accept-charset="utf-8">
                            <input type="hidden" id="blogId" name="blogId" th:value="${blogDetailVO.blogId}"/>
                            <div class="row">
                                <div class="col-md-6" style="width: 50%;">
                                    <input type="text" name="commentator" id="commentator" placeholder="(*必填)怎么称呼你?"
                                           class="form-control input-lg"/>
                                </div>
                                <div class="col-md-6" style="width: 50%">
                                    <input type="email" name="email" id="email" placeholder="(*必填)你的联系邮箱"
                                           class="form-control input-lg"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6" style="width: 50%">
                                    <input type="text" name="websiteUrl" id="websiteUrl" placeholder="你的网站地址(可不填)"
                                           class="form-control input-lg">
                                </div>
                                <div class="col-md-6" style="width: 50%">
                                    <div class="col-md-4" style="width: 33%">
                                        <img alt="单击图片刷新！" class="pointer"
                                             style="margin-top: 15px; border-radius: 25px;"
                                             th:src="@{/captcha}"
                                             onclick="this.src='/captcha?d='+new Date()*1">
                                    </div>
                                    <div class="col-md-8" style="width: 67%">
                                        <input type="text" class="form-control input-lg" name="verifyCode"
                                               id="verifyCode"
                                               placeholder="(*必填)请输入验证码"
                                               required="true">
                                    </div>
                                </div>
                            </div>
                            <textarea rows="10" name="commentBody" id="commentBody" placeholder="(*必填)请输入你的评论"
                                      class="form-control input-lg"></textarea>

                            <div class="buttons clearfix">
                                <button type="submit" id="commentSubmit" class="btn btn-xlarge btn-clean-one">提交
                                </button>
                            </div>
                        </form>
                    </aside>
                </th:block>

                <aside class="comments" id="comments">
                    <th:block th:if="${null != commentPageResult}">
                        <th:block th:each="comment,iterStat : ${commentPageResult.list}">
                            <article class="comment">
                                <header class="clearfix">
                                    <img th:src="@{/blog/luna/img/avatar.png}" class="avatar"/>
                                    <div class="meta">
                                        <h4 th:text="${comment.commentator}"></h4>
                                        <span class="date">评论时间：
                                            <th:block
                                                    th:text="${#dates.format(comment.commentCreateTime, 'yyyy-MM-dd HH:mm:ss')}"/>
                                        </span>
                                    </div>
                                </header>
                                <div class="body">
                                    <th:block th:text="${comment.commentBody}"/>
                                </div>
                            </article>
                            <th:block th:unless="${#strings.isEmpty(comment.replyBody)}">
                                <article class="comment reply">
                                    <header class="clearfix">
                                        <img th:src="@{${configurations.get('yourAvatar')}}"
                                             style="float: left;border-radius: 100px;width: 50px;">
                                        <div class="meta2">
                                            <h4 th:text="${configurations.get('yourName')}">十三</h4>
                                            <span class="date">回复时间：
                                                <th:block
                                                        th:text="${#dates.format(comment.replyCreateTime, 'yyyy-MM-dd HH:mm:ss')}"/>
                                            </span>

                                        </div>
                                    </header>
                                    <div class="reply-body">
                                        <th:block th:text="${comment.replyBody}"/>
                                    </div>
                                </article>
                            </th:block>
                        </th:block>

                        <br/>
                        <th:block th:if="${commentPageResult.pages > 1}">
                            <div style="text-align: center">
                                <div id="pagination" class="pagination" style="display: inline-block;float: none">
                                    <input id="total" type="hidden" th:value="${commentPageResult.total}"/>
                                    <input id="pageSize" type="hidden" th:value="${commentPageResult.pageSize}">/
                                    <input id="pageNum" type="hidden" th:value="${commentPageResult.pageNum - 1}"/>
                                    <input id="target" type="hidden"
                                           th:value="'blog/'+${blogDetailVO.blogId}+'?commentPage='"/>
                                </div>
                            </div>
                        </th:block>
                    </th:block>
                </aside>
            </article>
        </div>
        <footer th:replace="blog/luna/footer::footer-fragment"></footer>
    </body>
    <link rel="stylesheet" th:href="@{/blog/plugins/highlight/styles/github.css}">
    <link rel="stylesheet" th:href="@{/blog/plugins/sweetalert/sweetalert.css}"/>
    <script th:src="@{/blog/plugins/modernizr/modernizr.js}"></script>
    <script th:src="@{/blog/plugins/highlight/highlight.pack.js}"></script>
    <script th:src="@{/blog/plugins/comment/valid.js}"></script>
    <script th:src="@{/blog/plugins/comment/comment.js}"></script>
    <script th:src="@{/blog/plugins/sweetalert/sweetalert.min.js}"></script>
    <script th:src="@{/blog/luna/js/pagination.js}"></script>

    <script>
        $(function () {
            $('pre code').each(function (i, block) {
                hljs.highlightBlock(block);
            });
        });
    </script>
</html>